<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="../js/babel.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>

<script type="text/babel">

  class Test extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        counter: 0
      }

      this.increment = this.increment.bind(this)
    }

    increment() {
      console.log(333, this.props.incre);
      // this.setState((state, props) => {
      //   counter: this.state.counter + this.props.incre
      // })
      this.setState({
        counter: this.state.counter + this.props.incre
      })
    }

    render() {
      return (
        <div>
          <h2>合计: {this.state.counter}</h2>
          <button onClick={this.increment}>+</button>
          <button>-</button>
        </div>
      )
    }
  }

  ReactDOM.render(<Test incre={5} />, document.getElementById('root'))

</script>